<!DOCTYPE composition PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:rich="http://richfaces.org/rich"
	xmlns:a4j="http://richfaces.org/a4j"
	template="layout/mainTemplate.xhtml">

<ui:define name="mainArea">
	<h:outputStylesheet name="/css/home.css" />
	<h:form id="interviewsForm">
		<div class="formTop">
			<div class="criteriaTitle">
				<h:outputLabel value="#{xQueriesBackend.show.searchCriteria}" styleClass="criteria-title" />
			</div>
		</div>
		<h:panelGroup layout="block" styleClass="criteria" >
			<h:panelGrid columns="4" styleClass="criteriaGrid" 
						columnClasses="criteriaColumn, criteriaColumn, criteriaColumn narrow, criteriaColumn">
			
			<h:outputLabel value="#{xQueriesBackend.show.personName}:" />
			<h:inputText required="false" size="20"						
							value="#{xQueriesBackend.personName}"/>
			
			<h:outputLabel value="#{xQueriesBackend.show.topicName}:" />
			<h:inputText required="false" size="20"						
							value="#{xQueriesBackend.topicName}"/>	
							
			<h:outputLabel value="" />
			<h:commandButton id="searchAppsBtn" action="#{xQueriesBackend.searchMods}"
							value="#{xQueriesBackend.show.search}"
							image="/resources/img/icons/action.search.light.png"
							onclick="document.forms['interviewsForm'].target='_self'"
							/>
			</h:panelGrid>																	
		</h:panelGroup>
		
		<div class="tools-bar">
			<a4j:commandButton id="infoButton" image="/resources/img/icons/more-info.png"
							action="#{xQueriesBackend.showDetails}"
							disabled="#{xQueriesBackend.isModsSelected()}"
							oncomplete="#{rich:component('showDetailsPanel')}.show()"
							render="showDetailsPanel"/>
			
		</div>
		
						
		<rich:extendedDataTable id="interviewsTable" var="item"
	  					value="#{xQueriesBackend.resultModsList}" selectionMode="single" 
	  					selection="#{xQueriesBackend.modsSelection}" rows="14" sortMode="single"
						styleClass="centerTable" 
						columnClasses="modsIDCol, titleCol, genreCol, cdCol,
						 uriCol"
						rowClass="centerTableRow">	
																		
						<a4j:ajax execute="@this" event="selectionchange"
						listener="#{xQueriesBackend.selectionModsListener}"
						render="infoButton showDetailsPanel" />
					
					<rich:column id="modsID" sortBy="#{item.id} " width="50px">
	  						<f:facet name="header">
	  							<h:outputText value="#{xQueriesBackend.show.modsId}" />
	  						</f:facet>

	  							<h:outputText id="modsIDLabel" value="#{item.id}" />

	  				</rich:column>
					
					<rich:column id="modsFullTitle" sortBy="#{item.subtitle} " width="250px">
	  						<f:facet name="header">
	  							<h:outputText value="#{xQueriesBackend.show.modsTitle}" />
	  						</f:facet>

  							<h:outputText id="modsTitleLabel" value="#{item.title} - #{item.subtitle}" />

	  				</rich:column>
					
					<rich:column id="modsGenre" sortBy="#{item.genre} " width="100px">
	  						<f:facet name="header">
	  							<h:outputText value="#{xQueriesBackend.show.modsGenre}" />
	  						</f:facet>

  							<h:outputText id="modsGenreLabel" value="#{item.genre}" />

	  				</rich:column>					
					
					<rich:column id="modsCD" sortBy="#{item.cd} " width="100px">
	  						<f:facet name="header">
	  							<h:outputText value="#{xQueriesBackend.show.modsCD}" />
	  						</f:facet>

  							<h:outputText id="modsCDLabel" value="#{item.cd}" />

	  				</rich:column>
	  				
					<rich:column id="modsUri" sortBy="#{item.uri} " width="450px">
	  						<f:facet name="header">
	  							<h:outputText value="#{xQueriesBackend.show.modsURI}" />
	  						</f:facet>

  							<h:outputText id="modsURILabel" value="#{item.uri}" />

	  				</rich:column>						  														
		</rich:extendedDataTable>	
		
		<h:panelGroup id="modsTableScroller" styleClass="scroller" layout="block">
				
							<h:outputText value="#{xQueriesBackend.show.rows} #{xQueriesBackend.resultModsList.size()}" />
				
						<rich:dataScroller for="interviewsTable"
							 maxPages="5" fastControls="hide" 
							page="#{xQueriesBackend.modsPage}" styleClass="dataScroller">
							<f:facet name="first">
								<h:graphicImage value="/resources/img/icons/action.first.png" />
							</f:facet>
							<f:facet name="previous">
								<h:graphicImage value="/resources/img/icons/action.previous.small.png" />
							</f:facet>
							<f:facet name="next">
								<h:graphicImage value="/resources/img/icons/action.next.small.png" />
							</f:facet>
							<f:facet name="last">
								<h:graphicImage value="/resources/img/icons/action.last.png" />
							</f:facet>					
						</rich:dataScroller>
			</h:panelGroup>	
	<ui:include src="/homePanels.xhtml" />	
	</h:form>
</ui:define>


</ui:composition>